<template lang="html">
  <header class="head">
    <a href="#">{{message}}</a>
    <div class="aside" @click="toogleMenu">
        <div v-for="i in 3" class="line"></div>
    </div>
  </header>
</template>

<script>

export default {
  props: ["message"],
  methods:{
    toogleMenu() {
        var page = document.querySelector('#app .page')
        var aside = document.querySelector('.head .aside')
        var pageClass = page.className
        var asideClass = aside.className
        if(pageClass == "page") {
              page.className = "page toggle"
        }else {
            page.className = "page"
        }
        if(asideClass == "aside") {
          aside.className = "aside closeMenu"
        }else{
          aside.className = "aside"
        }
    }
  }
}
</script>

<style lang="stylus">
  header{
    width:100%;
    height:45px;
    background: #333;
    a{
      line-height: 45px;
      font-size:16px;
      float:left;
      color:#fff;
      text-decoration: none;
      padding-left: 10px;
    }
    .aside{
      width: 45px;
      height: 45px;
      position:absolute;
      top: 0;
      right: 6px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;

      .line{
        width: 22px;
        height: 1px;
        background: #fff;
        transition: all 0.5s;
      }
      .line:nth-of-type(2){
        margin: 6px 0;
      }

      }
      .closeMenu{
        .line:first-child{
          transform: rotate(45deg)
        }
        .line:nth-child(2){
          display: none
        }
        .line:last-child{
          transform: rotate(-45deg);
        }
    }
  }
</style>
